<template>
	<view class="pop-wrap" @touchmove.stop.prevent="moveHandle" :animation='animationData'>
		<view class="pop-content">
			<image class="pop-close" :src="popCloseIcon" @click="popClose(false)"></image>
			<view class="pop-title">
				<view class="pop-title__t">{{title}}</view>
			</view>
			<scroll-view class="pop-body rich-text" :scroll-y="true">
				<rich-text class="rich-text" :nodes="text"></rich-text>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 中间弹出的遮罩层
	import popCloseIcon from '../static/common/close.png'
	
	export default {
		props: {
			isShow: {
				type: Boolean, 
				default: false
			},
			text: {
				type: String
			},
			title: String
		},
		data() {
			return {
				animationData: {},
				popCloseIcon,
			}
		},
		mounted() {
			console.log('isShow: ' + this.isShow);
			console.log(this.isShow)
		},
		methods: {
			moveHandle() {},
			popClose() {
				console.log('点击了关闭');
				this.$emit('popClose', false)
			}
		},
		watch: {
			isShow: function() {
				console.log('watch' + this.isShow)
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction:'ease-out'
				})
				if(this.isShow) {
					this.animationData = animation.opacity(1).top(0).scale(1,1).step().export()
				}else{
					console.log('zhixinlezhili')
					this.animationData = animation.opacity(0).top('100%').scale(0,0).step().export()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../app.less');
	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:100%;
		.flex-base;
		align-items: flex-end;
	}
	
	.pop-content {
		background-color: @f;
		border-radius: 10upx 10upx 0 0;
		width: 100%;
		max-height: 80%;
		position: relative;
		bottom: 0;
		padding: 20upx;
		box-sizing: border-box;
		padding-top: 30rpx;
	}
	.pop-title {
		.flex-base;
		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
	}
	.pop-close {
		width: 30upx;
		height: 30upx;
		border-radius: 100%;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.pop-body{
		max-height: 60vh;
		text-align: justify;
		overflow: hidden;
	}
</style>
